<!DOCTYPE html>
<html>
	<head>
		<meta charset='UTF-8'>
		<title>CSS奇淫技巧二：純CSS选项卡实现方式</title>
		<link rel="stylesheet" type="text/css" href="css/reset-2.0.0.min.css"/>
		<script src="js/prefixfree-1.0.7.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.container {
				position: relative;
				width: 400px;
				margin: 50px auto;
			}
			
			input {
				display: none;
			}
			
			.nav {
				position: relative;
				overflow: hidden;
			}
			
			li {
				width: 200px;
				float: left;
				text-align: center;
				background: #ddd;
			}
			
			li label {
				display: block;
				width: 200px;
				line-height: 36px;
				font-size: 18px;
				cursor: pointer;
			}
			
			.content {
				position: relative;
				overflow: hidden;
				width: 400px;
				height: 100px;
				border: 1px solid #999;
				box-sizing: border-box;
				padding: 10px;
			}
			
			.content1,
			.content2 {
				display: none;
				width: 100%;
				height: 100%;
			}
			/*  兄弟选择符  */
			.nav1:checked~.nav li {
				background: #ddd;
				color: #000;
			}
			
			.nav1:checked~.nav li:first-child {
				background: #ff7300;
				color: #fff;
			}
			
			.nav2:checked~.nav li {
				background: #ddd;
				color: #000;
			}
			
			.nav2:checked~.nav li:last-child {
				background: #ff7300;
				color: #fff;
			}
			
			.nav1:checked~.content>div {
				display: none;
			}
			
			.nav1:checked~.content>div:first-child {
				display: block;
			}
			
			.nav2:checked~.content>div {
				display: none;
			}
			
			.nav2:checked~.content>div:last-child {
				display: block;
			}
			
			.active {
				background: #ff7300;
				color: #fff;
			}
			
			.default {
				display: block;
			}
		</style>
	</head>

	<body>
		<!--
        	作者：qwuxinhua@163.com
        	时间：2017-09-27
        	描述：关键部分采用兄弟选择符实现
        -->
		<div class="container">
			<input class="nav1" id="li1" type="radio" name="nav">
			<input class="nav2" id="li2" type="radio" name="nav">
			<ul class='nav'>
				<li class='active'><label for="li1">列表1</label></li>
				<li><label for="li2">列表2</label></li>
			</ul>
			<div class="content">
				<div class="content1 default">列表1内容:123456</div>
				<div class="content2">列表2内容:abcdefgkijkl</div>
			</div>
		</div>

	</body>

</html>